<!-- 本页样式 -->
<style scoped>
.del-dialog-cnt {
  font-size: 16px;
  text-align: center;
}
</style>
<!-- 页面布局-->
<template>
  <div class="table">
    <!-- 主体区 -->
    <div class="container">
        <el-form :model="formBean" :rules="validateRules" ref="form1" label-width="120px" class="ruleForm" style="width: 95%;height: 120px;">
            <div class="fxrow fxsc width100" style="margin-top: 100px;">
                <div class="fxcol fxsc" style="flex: 2;">
                    <div class="fxsc" style="height: 55px;">
                        <el-form-item label="模板导入" prop="modalFileName" style="margin-bottom: 0;">
                            <div class="fxrow">
                                <el-input v-model="formBean.modalFileName"></el-input>
                                <el-upload class="upload-demo" action="/cardFace/" :before-upload="beforeUploadModal"
                                    multiple :limit="1" :show-file-list="false" accept=".xlsx,.xls,.csv">
                                    <el-button size="small" type="primary" style="vertical-align: top;" @click="clearUploadModal">选择文件</el-button>	
                                </el-upload>
                            </div>
                        </el-form-item>
                    </div>
                </div>
                <div class="fxrow fxsc" style="flex: 1;">
                    <div>
                        <el-button type="primary" @click="transformFile()">转换</el-button>
                    </div>
                    <div>
                        <el-button type="primary" @click="downloadRes()" style="margin-left: 20px;">导出</el-button>
                    </div>                    
                    <div>
                        <el-button type icon="el-icon-download" @click="downloadFormwork()" style="margin-left: 20px;">模板下载</el-button>
                    </div>
                </div>
            </div>
        </el-form>
        <!-- 按钮操作区 -->
        <span slot="footer" class="form-btn-box">
          <el-button @click="cnacelForm('form1')">关 闭</el-button>
        </span>
        <!-- 按钮操作区END -->

    </div>
    <!-- 主体区END -->
  </div>
</template>


<script>
export default {
  data() {
    return {
      formBean: {
          modalFileName: "", //模板文件名称
      },
      validateRules: {
          modalFileName: [{ required: true, message: "请上传模板文件", trigger: "blur" }],
      },
      uploadForm: new FormData(),
      transSuccess: false,
      transDownloadUrl: "",
      cardApplyBatchId: ""
    };
  },
  props: {
    sourceData: {
      required: true
    }
  },
  mounted(){
    this.handleInitLoad();
  },
  methods: {
    handleInitLoad(){
      this.cardApplyBatchId = this.sourceData.seleid;
    },
    beforeUploadModal(file){
        this.uploadForm.append('file', file);
        this.uploadForm.append('cardApplyBatchId', this.cardApplyBatchId);
        this.$set(this.formBean, "modalFileName", file.name);
        return false;
    },

    clearUploadModal(){
        this.uploadForm.delete("file");
        this.uploadForm.delete("cardApplyBatchId");
        this.$set(this.formBean, "modalFileName", "");
    },

    /**
     * 转换文件
     */
    transformFile(){
      this.$refs['form1'].validate(valid => {
				if (valid) {
          var url = "/rps/cardApplyResp/divide/?time=" + new Date().getTime();
          //
          // 开启提交表单的loading
          this.fullscreenLoading = true;
          this.$util.loadingshow();
          this.$axios
            .post(url, this.uploadForm, {
              headers:{
                operator: this.$util.getLoginer().userid,
                withCredentials: true
              }
            })
            .then(res => {
              this.$util.loadinghide();
              let data = res.data;
              // 关闭提交表单的loading
              this.fullscreenLoading = false;
              if (data.success) {
                this.transSuccess = true;
                this.transDownloadUrl = data.data;
                this.$message.success("文件转换成功!");
              } else {
                this.transSuccess = false;
                this.transDownloadUrl = "";
                this.$error(data.message);
              }
            })
            .catch(err => {
              this.$util.loadinghide();
              this.fullscreenLoading = false;
            });
        }
      });

    },

    /**
     * 取消返回
     * @augments formName 表单名称
     */
    cnacelForm(formName) {
      this.$refs[formName].resetFields();
      this.$emit("cancel", null);
    },

    /**
     * 导出转换结果
     */
    downloadRes(){
      if(!this.transSuccess){
        this.$error("请在文件转换成功后，再尝试导出文件");
      }else{
        let downloadUrl = this.transDownloadUrl;
        let n = downloadUrl.split("/");
        var link = document.createElement('a');
        //设置下载的文件名
        link.download = n[ n.length-1 ];
        link.style.display = 'none';
        //设置下载路径
        link.href = downloadUrl;
        //浏览器兼容，禁止打开新的页面
        link.target = "_self";
        //触发点击
        document.body.appendChild(link);
        link.click();
        //移除节点
        document.body.removeChild(link);
      }
          },
    /**
     * 转换模板下载
     */
    downloadFormwork(){
      this.$axios
        .get("/rps/cardApplyDivide/template/export/", {
          headers: {
            operator: this.$util.getLoginer().userid,
            withCredentials: true
          }
        })
        .then(res => {
          let data = res.data;
          // 关闭提交表单的loading
          if (data.success) {
            let downloadUrl = data.data;
            let n = downloadUrl.split("/");
            var link = document.createElement('a');
            //设置下载的文件名
            link.download = n[ n.length-1 ];
            link.style.display = 'none';
            //设置下载路径
            link.href = downloadUrl;
            //浏览器兼容，禁止打开新的页面
            link.target = "_self";
            //触发点击
            document.body.appendChild(link);
            link.click();
            //移除节点
            document.body.removeChild(link);
          } else {
            this.$error(data.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>
